<template>
  <div>
    <div class="bpx-player-dm-setting-wrap">
      <div class="bui-panel-item bui-panel-item-active">
        <div class="bpx-player-dm-setting-left">
          <!--弹幕设置-->
          <div class="bpx-player-dm-setting-left-block-title" style="margin-bottom: 20px;">
            <span>弹幕设置</span>
            <div class="bui bui-button hoverBlue">
              <span class="bui-area bui-button-transparent" @click="danmakuDefaultSetting">恢复默认设置</span>
            </div>
          </div>

          <!--透明度设置-->
          <div class="bpx-player-dm-setting-left-opacity">
            <div class="bpx-player-dm-setting-left-opacity-title">不透明度</div>
            <div class="bpx-player-dm-setting">
              <el-slider v-model="opacityValue" size="small" :show-tooltip="false" :onclick="setOpacityValue"/>
            </div>
            <div class="bui-progress-val" style="width:43px">{{ opacityValue }}%</div>
          </div>
          <!--显示区域-->
          <div class="bpx-player-dm-setting-left-opacity">
            <div class="bpx-player-dm-setting-left-opacity-title">显示区域</div>
            <div class="bpx-player-dm-setting">
              <el-slider v-model="areaValue" size="small" :marks="marks" :step="25" :show-tooltip="false" :onclick="setAreaValue"/>
            </div>
            <div class="bui-progress-val" style="width:43px">
              {{
                areaValue === 0 ? '1/4' : (areaValue === 25 ? '半屏' : (areaValue === 50 ? '3/4' : (areaValue === 75 ? '不重叠' : (areaValue === 100 ? '不限' : '00'))))
              }}
            </div>
          </div>
          <!--弹幕字号-->
          <div class="bpx-player-dm-setting-left-opacity">
            <div class="bpx-player-dm-setting-left-opacity-title">弹幕字号</div>
            <div class="bpx-player-dm-setting" :onclick="setDanmakuSizeValue">
              <el-slider v-model="danmakuSizeValue" size="small" :show-tooltip="false" />
            </div>
            <div class="bui-progress-val" style="width:43px">{{ danmakuSizeValue + 50 }}%</div>
          </div>
          <!--弹幕速度-->
          <div class="bpx-player-dm-setting-left-opacity">
            <div class="bpx-player-dm-setting-left-opacity-title">弹幕速度</div>
            <div class="bpx-player-dm-setting">
              <el-slider v-model="danmakuSpeedValue" size="small" :marks="danmakuSpeed" :step="25"
                         :show-tooltip="false" :onclick="setDanmakuSpeedValue"/>
            </div>
            <div class="bui-progress-val" style="width:43px">
              {{
                danmakuSpeedValue === 0 ? '极慢' : (danmakuSpeedValue === 25 ? '较慢' : (danmakuSpeedValue === 50 ? '适中' : (danmakuSpeedValue === 75 ? '较快' : (danmakuSpeedValue === 100 ? '极快' : '00'))))
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "danmakuSettingBox",
  data() {
    return {
      opacityValue: 80,
      areaValue: 25,
      marks: {
        0: '1/4',
        25: '半屏',
        50: '3/4',
        75: '不重叠',
        100: '不限'
      },
      danmakuSizeValue: 0,
      danmakuSpeedValue: 50,
      danmakuSpeed: {
        0: '极慢',
        25: '',
        50: '适中',
        75: '',
        100: '极快'
      },
    }
  },
  created() {

  },
  methods: {
    danmakuDefaultSetting() {
      this.opacityValue = 80
      this.areaValue = 25
      this.danmakuSizeValue = 30
      this.danmakuSpeedValue = 50
      //todo danmakuDefaultSetting
      this.setOpacityValue()
      this.setAreaValue()
      this.setDanmakuSizeValue()
      this.setDanmakuSpeedValue()
    },
    setOpacityValue(){
      //设置字体透明度 1为不透明
      this.$bus.emit("setOpacityValue",this.opacityValue/100)
    },
    setAreaValue(){
     //设置弹幕显示区域 默认 0.5 一般屏幕
      this.$bus.emit("setAreaValue",this.areaValue == 100 ? 0.8:(this.areaValue + 25) /100)
    },
    setDanmakuSizeValue(){
    //设置弹幕大小 默认 8px
      this.$bus.emit("setDanmakuSizeValue",(this.danmakuSizeValue + 50)/100)
    },
    setDanmakuSpeedValue(){
    //设置弹幕播放速度 默认0.5
      this.$bus.emit("setDanmakuSpeedValue",this.danmakuSpeedValue/100)
    }
  },
}
</script>
<style>
.el-slider {
  /*width: 151px;*/
  --el-slider-height: 3px;
}

.el-slider--small {
  height: 13px;
}

.el-slider .el-slider__runway {
  background-color: hsla(0, 0%, 100%, .2);
}

.el-slider__button-wrapper {
  height: 33px;
  width: 33px;
}

.el-slider__button {
  background-color: #00a1d6;
  width: 12px;
  height: 12px;
}

.el-slider__bar {
  background-color: #00a1d6;
}

.el-slider__marks-text {
  font-size: 12px;
  color: var(--el-color-info);
  margin-top: 9px;
}
</style>
<style scoped>

.bpx-player-dm-setting-wrap {
  background: hsla(0, 0%, 8%, .2);
  border: none;
  border-radius: 4px 4px 0 0;
  box-sizing: border-box;
  cursor: default;
  font-size: 12px;
  text-align: left;
  z-index: 5;
}

.bui-panel-item-active {
  width: 300px;
  height: 300px;
  opacity: 1;
  pointer-events: auto;
}

.bui-panel-item {
  transition: opacity .1s;
}

.bpx-player-dm-setting-left {
  box-sizing: border-box;
  height: 100%;
  padding: 12px 20px;
  width: 100%;
}

.bpx-player-dm-setting-left-block {
  margin-bottom: 12px;
  overflow: hidden;
}

.bpx-player-dm-setting-left-block-title {
  margin-bottom: 5px;
}

.bui-button {
  float: right;
  height: 22px;
  line-height: 22px;
  /*margin-top: 9px;*/
  width: 116px;
  cursor: pointer;

}

.bui {
  -webkit-box-align: center;
  -webkit-box-pack: start;
  align-items: center;
  justify-content: flex-start;
  vertical-align: middle;
}

.bui-button-transparent {
  border: 1px solid hsla(0, 0%, 100%, .2);
  color: #fff;
}

.hoverBlue:hover {
  border: 1px solid #00a1d6;
  color: #00a1d6;
}

.hoverBlue span:hover {
  color: #00a1d6;
}

.bui-button .bui-area {
  -webkit-box-pack: center;
  background: none;
  border-radius: 2px;
  font-size: 12px;
  justify-content: center;
  min-width: 68px;
  outline: none;
  padding: 3px;
  text-align: inherit;
  transform: translateZ(0);
  transition: all .2s;
}

.bpx-player-dm-setting-left-flag {
  display: flex;
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 12px;
}

.bui-progress {
  cursor: pointer;
  height: 12px;
}

.bui {
  -webkit-box-align: center;
  -webkit-box-pack: start;
  align-items: center;
  display: flex;
  justify-content: flex-start;
  vertical-align: middle;
}

.bui-area {
  -webkit-box-align: center;
  -webkit-box-pack: start;
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: flex-start;
  line-height: normal;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  width: 100%;
}

.bui-progress-wrap {
  background-color: hsla(0, 0%, 100%, .2);
  border-radius: 1px;
  height: 2px;
  /*padding: 0 6px;*/
  position: relative;
  width: 100%;
}

.bui-progress-bar {
  background-color: #00a1d6;
  border-radius: 1px;
  height: 100%;
  position: relative;
  width: 0;
  z-index: 1;
}

.bui-progress-dot {
  border-radius: 50%;
  height: 12px;
  right: 0;
  transform: translate3d(6px, -5px, 0);
  width: 12px;
  background-color: #00a1d6;
  position: absolute;
  top: 0;
}

.bui-progress-val {
  color: hsla(0, 0%, 100%, .8);
  cursor: default;
  font-size: 12px;
  line-height: 16px;
  text-align: right;
  user-select: none;
}

.bui-progress-step {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 12px;
  left: 6px;
  pointer-events: none;
  position: absolute;
  right: 6px;
  top: 0;
}

.bui-progress-item:first-child {
  margin-left: -6px;
}

.bui-progress-item {
  height: 12px;
  left: 0;
  margin-left: -1px;
  position: absolute;
  top: -1px;
  white-space: nowrap;
}

.bui-progress-lab {
  background: hsla(0, 0%, 100%, .2);
  border-radius: 1px;
  height: 4px;
  width: 2px;
}

.bui-progress-text {
  color: hsla(0, 0%, 100%, .5);
  font-size: 12px;
  line-height: 16px;
  margin-top: 5px;
  -webkit-transform: translateX(-45%);
  transform: translateX(-45%);
}

.bpx-player-dm-setting-left-opacity {
  -webkit-box-align: center;
  align-items: center;
  display: flex;
  height: 16px;
  line-height: 16px;
  margin-bottom: 20px;
  width: 100%;
}

.bpx-player-dm-setting-left-area-title,
.bpx-player-dm-setting-left-block-title,
.bpx-player-dm-setting-left-fontsize-title,
.bpx-player-dm-setting-left-opacity-title,
.bpx-player-dm-setting-left-speedplus-title {
  color: #fff;
  height: 16px;
  line-height: 16px;
  text-align: left;
}

.bpx-player-dm-setting-left-area-content,
.bpx-player-dm-setting-left-fontsize-content,
.bpx-player-dm-setting-left-opacity-content,
.bpx-player-dm-setting-left-speedplus-content {
  -webkit-box-flex: 1;
  flex: 1;
  height: 12px;
  /*margin-left: 10px;*/
  margin-left: 15px;
  width: 200px;
}

.bpx-player-dm-setting {
  -webkit-box-flex: 1;
  flex: 1;
  height: 12px;
  /*margin-left: 10px;*/
  margin-left: 15px;
  /*width: 200px;*/
}
</style>
